import { defineStore } from 'pinia'
import { XStream } from 'ant-design-x-vue';
import { ref } from 'vue';

//  `defineStore()` 的返回值的命名是自由的
// 但最好含有 store 的名字，且以 `use` 开头，以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const aiMessage = defineStore('aiMessage', {
    // 其他配置...
    state: () => {
        return {
            messages: [
                { role: 'system', content: '系统提示词' },
                { role: 'user', content: '用户消息!' },
                { role: 'assistant', content: 'AI回复消息!' }
            ],
            //用户消息，打字内容，同步渲染到列表上
            userMessage: ""
        }
    },
    getters: {
        getMessages(state) {
            return state.messages;
        },
        getUserMessage(state) {
            return state.userMessage;
        }
    },
    actions: {
        userSendMessage(msg: string) {
            this.messages.push({ role: 'user', content: msg });
            this.userMessage = msg;
            const ai_result = ref({ role: 'assistant', content: '' })
            //发送给后端，然后后端AI回复
            fetch('http://localhost:8080/ai/stream?message=' + msg, {
                method: "GET"
            }).then(async (response) => {
                //把AI回复放到消息列表中
                this.messages.push(ai_result.value);
                for await (const chunk of XStream({
                    readableStream: response.body,
                })) {
                    ai_result.value.content += chunk.data;
                }
            }).catch((error) => { });

        }
    },
})